<template>
  <div class="order-detail">
    <div class="steps">
      <el-steps :active="active" align-center finish-status="success" v-if="active!=0">
        <el-step title="拍下商品" :description="time.createdTime"></el-step>
        <el-step title="付款到支付宝" :description="time.payTime"></el-step>
        <el-step title="卖家发货" :description="time.expressTime"></el-step>
        <el-step title="确认收货" :description="time.receivedTime"></el-step>
        <el-step title="评价" :description="time.commentTime"></el-step>
      </el-steps>
    </div>
    <div class="content">
      <div class="left">
        <span class="left-header"><i class="el-icon-s-order"></i> 订单信息</span>
        <div class="left-content1">
          <span class="b c">收货信息：</span> <span class="a">{{ this.orderInfo.receiver }}，{{ this.orderInfo.tel }}，{{
            this.orderInfo.address
          }}</span><br>
          <span class="c">订单编号：</span> {{ this.orderInfo.outTradeNo }}<br>
          <span class="c">买家留言：</span> {{ this.orderInfo.note == null ? ' 无' : this.orderInfo.note }}
          <!--          <button class="btn-remark z" @click="remarkVisible=!remarkVisible" v-if="!remarkVisible">补充留言</button>-->
          <!--          <br>-->
          <!--          <div class="remarkBox" v-if="this.active==1&&remarkVisible">-->
          <!--            <button class="btn-remark2" @click="remarkVisible=!remarkVisible" v-if="remarkVisible">补充留言：</button>-->
          <!--            <el-input-->
          <!--                class="remark"-->
          <!--                type="textarea"-->
          <!--                placeholder="如果需要，可以补充留言。"-->
          <!--                v-model="remarks"-->
          <!--                :rows="rowNum"-->
          <!--                maxlength="200"-->
          <!--                show-word-limit-->
          <!--                resize="none"-->
          <!--                @focus="focusChange"-->
          <!--                @blur="blurChange"-->
          <!--            >-->
          <!--            </el-input>-->
          <!--          </div>-->
        </div>
        <div class="left-content2" v-if="this.active>=3">
          <span class="c">配送方式：</span> {{ this.orderInfo.expressCompany }} （包邮）<br>
        </div>
      </div>
      <div class="right" v-bind:style="{  height: heightNum + 'px' }">
        <el-result icon="warning" title="订单状态：交易关闭" v-if="this.active==0"></el-result>
        <el-result icon="warning" title="订单状态：商品已拍下，等待买家付款" v-if="this.active==1"></el-result>
        <el-result icon="success" title="订单状态：买家已付款，等待商家发货" v-if="this.active==2"></el-result>
        <el-result icon="success" title="订单状态：商家已发货，等待买家确认" v-if="this.active==3"></el-result>
        <el-result icon="success" title="订单状态：交易成功" v-if="this.active==4"></el-result>
        <el-result icon="success" title="订单状态：交易结束" v-if="this.active==5"></el-result>
        <div class="right-content">
          <span class="time" v-if="this.active==1">您还有<span class="red">{{ minutes }}分{{ seconds }}秒</span>来付款，超时订单自动关闭</span>
          <span class="time1" v-if="this.active==0">取消时间：{{ time.cancelTime }}</span>
          <span class="time1" v-if="this.active==2">成交后商家会根据订单陆续发货，请买家耐心等待。</span>
          <span class="time1" v-if="this.active==3">请在发货后{{ day }}天内确认收货，超时订单自动确认收货。</span><br>
          <span class="time1 express" v-if="this.active==3">快递单号：<span
              class="e">{{ this.orderInfo.express }}</span></span><br>
          <span class="time1 a4" v-if="this.active==4">如果您已收到货，且对商品满意，麻烦给个好评哦！</span>
          <span class="time1 a4" v-if="this.active==5">如果对商品满意且想要回购，可以点击再来一单。</span>
          <span class="do">您可以</span>
          <router-link class="list-group-item" active-class="active" to="/paybook">
            <span class="do" v-if="this.active==0||this.active==2"></span>
            <span class="todo" v-if="this.active==0||this.active==2"><i class="el-icon-d-arrow-right"></i>再去逛逛吧</span>
          </router-link>
          <el-button class="btn1" v-if="this.active==1" @click="toPay">去支付</el-button>
          <el-button class="btn1" v-if="this.active==1" @click="toCancel">取消订单</el-button>
          <el-button class="btn1" v-if="this.active==3" @click="toReceive">确认收货</el-button>
          <el-button class="btn1" v-if="this.active==4" @click="toComment">去评论</el-button>
          <el-button class="btn1" v-if="this.active==4||this.active==5" @click="toAgain">再来一单</el-button>
        </div>
      </div>
    </div>
    <div class="space1"></div>
    <div class="table">
      <span class="goods"><i class="el-icon-goods"></i>购买信息</span>
      <div class="space"></div>
      <el-table
          :data="orderDeatils"
          border
          stripe
          style="width: 100%"
      >
        <el-table-column
            label="商品"
            align="center"
        >
          <template slot-scope="scope">
            <router-link class="list-group-item" :to="`/purchasePage?curBookId=${scope.row.bookId}`">
              <img class="bookImg" style="height: 120px" :src="$store.state.baseImgUrl+scope.row.book.img">
              <span class="bookTitle">{{ scope.row.book.name }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
            label="商品属性"
            width="260"
            align="center">
          <template slot-scope="scope">
            图书规格：{{ scope.row.book.spec }}<br>包装装订：{{ scope.row.book.binding }}<br>
            印张/字数：{{ scope.row.book.sheet }}/{{ scope.row.book.words }}
          </template>
        </el-table-column>
        <el-table-column
            label="单价"
            align="center"
            width="110">
          <template slot-scope="scope">
            ￥{{ scope.row.book.price |rounding }}
          </template>
        </el-table-column>
        <el-table-column
            label="数量"
            align="center"
            width="90">
          <template slot-scope="scope">
            {{ scope.row.count }}
          </template>
        </el-table-column>
        <el-table-column
            label="交易状态"
            width="170"
            align="center">
          {{ states }}
        </el-table-column>
      </el-table>
      <div class="total-footer">
        <span class="t1">实付款</span>：
        <span class="t2">￥{{ total |rounding }}</span>
        <span class="yuan">元</span>
      </div>
      <div class="space space1"></div>
    </div>
    <div class="hot">
      <Hot></Hot>
    </div>
  </div>
</template>

<script>
import Hot from "../Hot";

export default {
  name: "OrderDetail.vue",
  components: {Hot},
  data() {
    return {
      orderInfo: '',
      orderDeatils: [],
      active: '',
      time: {
        createdTime: ' ',
        payTime: ' ',
        expressTime: ' ',
        receivedTime: ' ',
        commentTime: ' ',
        cancelTime: ' ',
      },
      minutes: 15,
      seconds: 0,
      day: '',
    }
  },
  computed: {
    heightNum() {
      if (this.active >= 3) {
        return 423
      } else {
        return 363
      }
    },
    states() {
      var state = ''
      if (this.active == 0) {
        state = '交易关闭'
      } else if (this.active == 1) {
        state = '等待买家付款'
      } else if (this.active == 2) {
        state = '等待商家发货'
      } else if (this.active == 3) {
        state = '等待确认收货中'
      } else if (this.active == 4) {
        state = '交易成功，等待评论'
      } else if (this.active == 5) {
        state = '交易完成'
      }
      return state
    },
    total() {
      var total = 0;
      this.orderDeatils.forEach(item => {
        total += item.book.price * item.count
      })
      return total;
    },
  },
  methods: {
    num(n) {
      return n < 10 ? '0' + n : n
    },
    downTime() {
      //倒计时
      let date = (new Date(this.time.cancelTime).getTime() - new Date().getTime())
      let newDate = new Date(date)
      this.minutes = newDate.getMinutes()
      this.seconds = newDate.getSeconds()
      var _this = this
      var time = window.setInterval(function () {
        if (_this.seconds === 0 && _this.minutes !== 0) {
          _this.seconds = 59
          _this.minutes -= 1
        } else if (_this.minutes === 0 && _this.seconds === 0) {
          _this.seconds = 0
          window.clearInterval(time)
        } else {
          _this.seconds -= 1
        }
      }, 1000)
    },
    toPay() {
      this.$router.push({
        path: '/detailToOrder',
        query: {
          from: 'buy',
          oid: this.orderInfo.id
        }
      })
    },
    toCancel() {
      this.getRequest('/oms/bookOrder/cancel/' + this.orderInfo.id).then(() => {
        this.$message.success("取消成功")
        this.$router.go(0)
      })
    },
    toReceive() {
      this.getRequest('/oms/bookOrder/over/' + this.orderInfo.id).then(() => {
        this.$message.success("确认成功")
        this.$router.go(0)
      })
    },
    toComment() {
      this.$router.push({
        path: '/toComment',
        query: {
          oid: this.orderInfo.id
        }
      })
    },
    toAgain() {
      for (let i = 0; i < this.orderInfo.details.length; i++) {
        this.getRequest('/cms/cart/create', {
          bid: this.orderInfo.details[i].bookId,
          count: this.orderInfo.details[i].count
        }).then((resp) => {
          if (resp) {
            this.$router.push({
              path: '/pay',
            })
          }
        })
      }
    }
  },
  watch: {
    seconds(newVal) {
      this.num(newVal)
      if (this.minutes == 0 && this.seconds == 0) {
        this.$router.go(0)
      }
    },
    minutes(newVal) {
      this.num(newVal)
    },
  },
  created() {
    if (this.$route.query.oid) {
      this.orderId = this.$route.query.oid
    } else {
      this.$router.push('/myOrder')
    }
    this.getRequest('/oms/bookOrder/' + this.orderId).then((resp) => {
      console.log(resp.data)
      this.orderInfo = resp.data
      this.orderDeatils = resp.data.details
      this.active = resp.data.status
      this.time.createdTime = resp.data.createdTime
      this.time.cancelTime = resp.data.cancelTime
      if (this.active == 1) {
        this.downTime()
      }
      this.time.payTime = resp.data.payTime
      this.time.expressTime = resp.data.expressTime
      this.time.receivedTime = resp.data.receivedTime
      if (resp.data.details[0].comment != null) {
        this.time.commentTime = resp.data.details[0].comment.createdTime
      }
    })
    //获取订单设置：天数
    this.getRequest('/p/orderSetting').then((resp) => {
      this.day = resp.data.complete
    })
  }
}
</script>

<style scoped>

.order-detail {
  margin-top: 100px;
  margin-bottom: 150px;
}

::v-deep .el-step__title {
  font: bold 21px 华文黑体;
  line-height: 58px;
  position: relative;
  top: -76px;
}

::v-deep .el-step__title.is-success {
  color: #e04747;
}

::v-deep .el-step__head.is-success {
  color: #e04747;
  border-color: #e04747;
}

::v-deep .el-result .icon-success {
  fill: #f1a480
}

::v-deep .el-result .icon-warning {
  fill: #80c9f1
}

::v-deep .el-step__icon {
  width: 44px;
  height: 44px;
  font-size: 22px;
}

::v-deep .el-step__title.is-process {
  color: #5a5757;
}

::v-deep .el-step__head.is-process {
  color: #5a5757;
  border-color: #5a5757;
}

::v-deep .el-step__description.is-success {
  color: #827f7f;
  font: 500 16px 华文宋体;
}

::v-deep .el-step.is-center .el-step__description {
  padding: 0;
}

::v-deep .el-step__main {
  position: relative;
  top: -22px;
}


.content {
  position: relative;
  margin-top: 20px;
}

.left {
  width: 40%;
  border: 1px solid #f8e3e3;
  background: #fcfafa;
  padding-bottom: 50px;
}

.left-header {
  background: #fcfafa;
  font: 400 23px 华文黑体;
  display: inline-block;
  padding: 15px 291px 15px 38px;
  border: 1px solid #f8e3e3;
  color: #666464;
  background: #f8f0f0;
  letter-spacing: 1px;
}

::v-deep .left-header[data-v-02ad4c5e] {
  width: 130px;
}

.left-content1 {
  font: 300 18px 华文宋体;
  margin-top: 50px;
  margin-left: 42px;
}

.left-content2 {
  font: 300 18px 华文宋体;
  margin-left: 42px;
}

.left-content1 span:not(.a), .left-content2 span {
  display: inline-block;
  margin-top: 35px;
  color: #939292;
  font-weight: 400;
}


.a {
  line-height: 27px;
  width: 280px;
  color: black;
  display: inline-block;
}

.b {
  position: relative;
  top: -54.5px;
}

.c {
  font: 500 18px 华文宋体;
}

.left {
  float: left;
}

.right {
  float: left;
  width: 59%;
  border: 1px solid #f8e3e3;
}

::v-deep .el-result {
  position: relative;
  width: 200px;
  top: 50px;
  padding: 15px 20px;
}

::v-deep .el-result__title p {
  width: 550px;
  position: relative;
  top: -72px;
  left: 332px;
  font: bold 22px 华文黑体;
  text-align: left;
}

.do {
  margin-top: 54px;
  display: inline-block;
  font: 400 20px 华文黑体;
  padding-left: 160px;
  padding-right: 45px;
  color: #767575;
}

.time {
  display: inline-block;
  padding-left: 160px;
  font: 500 18px 华文宋体;
}

.red {
  color: red;
  font-weight: bold;
}

.todo {
  color: black;
  position: relative;
  top: -1px;
  left: -200px;
}

.todo:hover {
  color: #f57979;
  text-decoration: underline;
}

::v-deep .el-button {
  font: 400 17px 华文黑体;
  margin-right: 20px;
  width: 107px;
  text-align: center;
}

::v-deep .el-button:hover {
  border: 1px solid #ee8080;
  background: #f8e3e3;
  color: #f87777;
}

.time1 {
  display: inline-block;
  padding-left: 160px;
  font: 500 18px 华文黑体;
  color: gray;
  margin-top: 10px;
}

.express {
  margin-top: 25px;
  margin-bottom: 15px;
}

.e {
  color: black;
}

.a4 {
  position: relative;
  top: -30px;
}

.table {
  position: relative;
  top: 30px;
  width: 99.4%;
  /*border: 1px solid red;*/
}

.bookTitle {
  position: relative;
  top: -50px;
  left: 5px;
  display: inline-block;
  width: 70%;
  text-align: left;
}

.bookImg {
  position: relative;
  left: -8px;
}

.goods {
  display: inline-block;
  font: 400 23px 华文黑体;
  margin: 10px 10px 0px 0px;
  padding: 0px 30px 7px 30px;
  border-bottom: 3px solid #e89191;
  letter-spacing: 1px;
}

.space {
  width: 127px;
  height: 20px;
  position: relative;
  left: 28px;
  border-left: 3px solid #e89191;
  border-right: 3px solid #e89191;
}

.el-icon-goods {
  margin-right: 8px;
}

::v-deep .el-table--border th.el-table__cell {
  background: #fce7e7;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #fdfbfb;
}

.space1 {
  left: 855px;
  top: 30px;
  width: 250px;
}

.total-footer {
  width: 320px;
  position: relative;
  left: 820px;
  top: 30px;
  border-bottom: 3px solid #e89191;
  font: 600 20px 华文黑体;
  vertical-align: bottom;
  text-align: center;
}

.t2 {
  font: bold 33px 华文宋体;
  color: #f54d4d;
  padding-right: 10px;
}

.hot {
  margin-top: 50px;
}
.space1{
  clear: both;
}
</style>